let Utils = require("../../framework/js/utils");

Vue.component("aui-form-file", {
    template: `
<div class="aui-file-upload">
  <div class="aui-file-select">                                                 
    <input ref="fileinput" :id="fileinputid" type="file" @change="handleFileChange" /><div class="aui-file-select-name">
    <div v-if="currentFiles.length < 1">No file chosen...</div><div class="aui-file-select-name__file" v-if="currentFiles.length > 0">{{currentFiles[0].name}}</div>
</div><div class="aui-file-select-button">Choose File</div>
  </div>
  <div id="queue"></div>  
</div>    
    `,
    data() {
        var ret = {};
        ret.currentFiles = [];

        ret.fileinputid = Utils.uniqueSelector("fileinput_");

        ret.s = 1;
        return ret;
    },
    mounted() {
        var self = this;
        self.anuElement = $(self.$refs.fileinput);

        var iframe = false;
        if(fuckIE9){
            iframe = true;
        }

        var options = {
            url: "",
            iframe: iframe,
            dataType: 'text',
            singleFileUploads: true,
            paramName: "file",
            sequentialUploads: true,
            autoUpload: false,
            formData: {}
        };

        self.globalfilesubmit = {};

        var file_id =  Utils.uniqueSelector("fileinput_");

        var uploader = $(self.$refs.fileinput).fileupload(options);

        uploader.on("fileuploadadd", function(evt, data) {
            console.log("Add file");
            data.url = rootcontroller.getUploadUrl() + "&k=" + file_id;

            self.globalfilesubmit = data;
            window.globalfilesubmit = data;

            data.file_id = file_id;

            self.$emit("fileuploadadd", evt, data);
        });

        uploader.on("fileuploadstart", function(evt, data) {
            console.log("upload start");

            self.$emit("fileuploadstart", evt, data);
        });

        uploader.on("fileuploaddone", function(evt, data) {
            console.log("upload done");

            self.$emit("fileuploaddone", evt, data);
        });

        uploader.on("fileuploadfail", function(evt, data) {
            console.log("upload failed");

            self.$emit("fileuploadfail", evt, data);
        });

        uploader.on("fileuploadchange", function(evt, data) {
            console.log("change");
            self.handleFileChange(evt, data);
        });

        if (fuckIE9) {
            // self.anuElement.fileReader( {
            //     filereader: window.globalFileReaderPath,
            //     debugMode: false,
            //     onFileInputEvent: function (e) {
            //         if (e.type === "change") {
            //             self.handleFileChange(e);
            //         }
            //     }
            // });
        }
        if (fuckIE9 || isIE10) {
            self.anuElement.mousedown(function() {
                $(this).trigger('click');
            })
        }
    },
    methods: {
        handleFileChange(e, data) {
            var self = this;
            if (fuckIE9) {
                if (data && data.files && data.files.length > 0) {
                    self.currentFiles = data.files;
                    self.$emit("input", self.currentFiles[0].name);
                }
            } else {
                if (e.target.value) {
                    if (e.target.files && e.target.files.length > 0) {
                        self.currentFiles = e.target.files;
                    } else {
                        self.currentFiles = [{
                            name: e.target.value
                        }];
                    }
                    self.$emit("input", self.currentFiles[0].name);
                }
            }
        },
    }
});